$S.TreeGrid = Ext.extend($S.Grid, {    
    initComponent : function(config) {
        $S.TreeGrid.superclass.initComponent.call(this, config);
        delete config.marginHeight;
        delete config.marginWidth;
        if (this.lockColumns.length > 0) {
            var ltid = this.id + "_lb_tree",
                ltc = this.createTreeConfig(config, this.lockColumns, ltid, true,this);
            this.lb.set({id : ltid});//.addClass('item-treegrid');
            var lockTree = this.lockTree = new $S.Tree(ltc);
            lockTree.body = this.lb;
            lockTree.treeGrid = this;
            lockTree.on('render', function() {
                    this.processData();
                    Ext.DomHelper.insertHtml("beforeEnd", this.lb.dom,'<div style="height:17px"></div>');
                }, this)
            lockTree.on('expand', function(tree, node) {
                this.unlockTree.getNodeById(node.id).expand();
            }, this);
            lockTree.on('dblclick',function(tree, r){
                this.fireEvent('dblclick', this, r)           
            },this);
            lockTree.on('collapse', function(tree, node) {
                this.unlockTree.getNodeById(node.id).collapse();
            }, this);
        }
        var utid = this.id + "_ub_tree",
            tc = this.createTreeConfig(config, this.unlockColumns, utid,this.lockColumns.length == 0, this);
        this.ub.set({id : utid}).addClass('item-treegrid');
        var unlockTree = this.unlockTree = new $S.Tree(tc);
        unlockTree.body = this.ub;
        unlockTree.treeGrid = this;
        unlockTree.on('dblclick',function(tree, r){
            this.fireEvent('dblclick', this, r)
        },this);
        unlockTree.on('render', this.processData, this);
    },
    onFocusKeyDown : function(){},
    initTemplate : function() {
        $S.TreeGrid.superclass.initTemplate.call(this);
//        this.cbTpl = new Ext.Template('<center style="width:{width}px"><div class="{cellcls}" style="height:13px;padding:0px;" id="'
//                + this.id + '_{name}_{recordid}"></div></center>');
    },
    createTemplateData : function(col, record) {
        return {
            width : col.width - 2,
            // cwidth:col.width-4,
            recordid : record.id,
            visibility : col.hidden === true ? 'hidden' : 'visible',
            name : col.name
        }
    },
    createTreeConfig : function(config, columns, id, showSkeleton, grid) {
        var dc = columns[0];
        return {
            sw : 18,
            id : id,
            expandAll:config.expandAll,
            checkField:config.checkField,
            displayField:config.displayField,
            expandField:config.expandField,
            parentField:config.parentField,
            sequenceField:config.sequenceField,
            showCheckBox:config.showCheckBox,
            iconField:config.iconField,
            idField:config.idField,
            showSkeleton : showSkeleton,
            columns : columns,
            displayField : dc.name,
            grid: grid,
            renderer : dc.renderer,
            createTreeNode : function(item) {
                return new $S.Tree.TreeGridNode(item);
            },
            onNodeSelect : function(el) {
                el['itemNodeTable'].style.backgroundColor = '#ffffd5';
            },
            onNodeUnSelect : function(el) {
                el['itemNodeTable'].style.backgroundColor = '';
            }
        }
    },
    processData : function(tree, root) {
        if (!root)
            return;
        var sf = this,items = [];
        if (tree.showRoot) {
            sf.processNode(items, root)
        } else {
            Ext.each(root.children,function(child){
                sf.processNode(items, child);
            });
        }
        sf.dataset.data = items;
        sf.editing &&
            sf.positionEditor();
        
    },
    onLoad : function(){
        this.drawFootBar();
        $S.Masker.unmask(this.wb);
    },
    processNode : function(items, node) {
        items.add(node.record);
        Ext.each(node.children,function(child){
            this.processNode(items, child);
        },this);
    },
    bind : function(ds) {
        if (typeof(ds) === 'string') {
            ds = $S.CmpManager.get(ds);
            if (!ds)
                return;
        }
        var sf = this;
        sf.dataset = ds;
        sf.processDataSetLiestener('on');
        if (sf.lockTree)
            sf.lockTree.bind(ds);
        sf.unlockTree.bind(ds);
        sf.drawFootBar();
    },
    setColumnSize : function(name, size) {
        $S.TreeGrid.superclass.setColumnSize.call(this, name, size);
        var sf = this,c = sf.findColByName(name),
            tree = c.lock == true ? sf.lockTree : sf.unlockTree;
        c.width = size;
        if (name == tree.displayField) {
            tree.width = size;
            //size = size-1
        }
        tree.root.setWidth(name, size);
    },
    renderLockArea : function() {
        var sf = this,v = 0;
        Ext.each(sf.columns,function(c){
            if (c.lock === true && c.hidden !== true) {
                v += c.width;
            }
        });
        sf.lockWidth = v;
    },
    focusRow : function(row){
        var sf = this,record = sf.dataset.getAt(row),
            node = sf.unlockTree.getNodeById(record.id),
            els = node?node.els:null;
        if(!els)return;
        var ub = sf.ub,
            stop = ub.getScroll().top,
            height = Ext.fly(els.element).getTop()-ub.getTop()+stop;
            r = 25,
            h = ub.getHeight(),
            sh = ub.dom.scrollWidth > ub.dom.clientWidth? 16 : 0;
        if(height<stop){
            ub.scrollTo('top',height-1)
        }else if(height+r>(stop+h-sh)){
            ub.scrollTo('top', height+r-h + sh);
        }
    },
    onUpdate : function(ds,record, name, value){
        $S.TreeGrid.superclass.onUpdate.call(this,ds,record, name, value);
//        var sf = this,c = ((sf.selectable && sf.lockColumns.length == 1) || sf.lockColumns.length == 0)?sf.unlockTree:sf.lockTree,
//            node = c.getNodeById(record.id),
//            tree = node.getOwnerTree();
//            node.els && node.doSetWidth(tree.displayField, tree.getColumn(tree.displayField).width);
    },
    onMouseWheel : function(e){
    },
    onAdd : function(){}
    
});
$S.Tree.TreeGridNode = Ext.extend($S.Tree.TreeNode, {
            createNode : function(item) {
                return new $S.Tree.TreeGridNode(item);
            },
            createCellEl : function(df) {
                var sf = this,tree = sf.getOwnerTree(),tc = tree.columns[0],
                    align = tc.align,r = sf.record, td = sf.els[df + '_td'],
                    text = r.get(tree.displayField)
                    if(!Ext.isEmpty(tree.renderer)){
                        var renderer = window[tree.renderer];
                        if(renderer)
                        text = renderer.call(this, text, r, this);
                    }
//                    sf.els[df + '_td'].innerHTML = text;
                sf.els[df + '_td'] = Ext.DomHelper.insertHtml("afterBegin", td, '<div>'+text+'</div>');
            },
            initColumns : function(){
                var tree = this.ownerTree,w = 0,tr = this.els['itemNodeTr'];
                if (this.isRoot() && tree.showRoot == false) return;
                Ext.fly(tr).set({height:25});
                Ext.each(tree.columns,function(c){
                    var name = c.name,r = this.record;
                    w+=c.width;
                    if(name == tree.displayField && tree.showSkeleton){
                        this.doSetWidth(name,c.width);
                    } else {
                        
                        var td = tr.insertCell(-1),align = c.align;
                        this.els[name + '_td'] = td;
                        if (align) td.style.textAlign = align;
                        td.className = tree.treeGrid.cellCls;
                        Ext.fly(td).set({
                            id:tree.grid.id+'_'+name+'_'+r.id,
                            rid:r.id,
                            width:c.width,
                            stype:'cell',
                            dataindex:name
                        })
                        td.innerHTML = '<div class="tg-cell">' + tree.grid.createCell(c, r,false) + '</div>';
//                        td.innerHTML = '<div style="width:'+(c.width-6)+'px;">' + tree.grid.createCell(c, r,false) + '</div>';
//                        tr.appendChild(td);
//                        Ext.fly(td).addClass(tree.treeGrid.cellCls).setStyle('width',(c.width-6)+'px');
                        Ext.fly(td).addClass(tree.treeGrid.cellCls);//.setStyle('width',(c.width-1)+'px');
//                        Ext.fly(td).setWidth(c.width);
                    }
                },this);
                this.width = w;
                Ext.fly(this.els['itemNodeTable']).setWidth(w)                
            },
            syncWidth:function(){},
            setWidth : function(name,w){
                this.doSetWidth(name,w);
                if(this.childrenRendered) {
                    var pathNodes = this.childNodes;
                    for(var i=0;i<pathNodes.length;i++){
                        var node = pathNodes[i];
                        node.setWidth(name,w);
                    }
                }
                var w = 0;
                Ext.each(this.ownerTree.columns,function(c){
                    w+=c.width;
                },this)
                this.width = w;
                Ext.fly(this.els['itemNodeTable']).setWidth(w)
            },
            doSetWidth : function(name,w){
                if(!w)return;
                if(this.isRoot() && this.getOwnerTree().showRoot == false) return;
                var els = this.els,tree = this.getOwnerTree(),
                    left = w-(name == tree.displayField && tree.showSkeleton ? ((tree.showCheckBox ? 1 : 0) +this.getPathNodes().length)*tree.sw+1 : 0); 
                    Ext.fly(els[name+'_td']).setWidth(left);
                    if(name != tree.displayField ){
                        Ext.fly(els[name+'_td']).first().setWidth(left);
                    }
            }
        });